<template>
	<div class="container">
		<view class="total flex-space-between">
			<text>
				共计
				<text class="blue">{{ totalNum }}</text>
				台
			</text>
			<view class="type" @click.stop="changeEChartType">
				筛选
				<text class="iconfont icon-xiajiantou"></text>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" class="title" title="商户名称：" :value="item.merchName" />
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="代理商编号：" :value="item.agentNo" />
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="代理商名称：" :value="item.agentName" />
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="商户编号：" :value="item.merchNo" />
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="产品政策：" :value="item.policyName" />
				<u-cell-item v-if="item.cond!=-2" :arrow="false" hover-class="none" :border-bottom="false" title="达标状态：" :value="item.cond | condType" />
			</view>
		</view>
		<u-popup v-model="filterPopup" mode="top" :border-radius="20">
			<div class="filter-body">
				<!-- <view class="f-title">筛选条件</view> -->

				<div class="filter-content">
					<u-field label="商户编号：" v-model="query.merchNo" :label-width="170" input-align="left" placeholder="请输入商户编号"></u-field>
					<u-field :disabled="true" label="产品政策：" :value="query.policyName" input-align="left" :label-width="170" placeholder="请选择" @click="showPicker = true">
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showPicker = true"></text>
					</u-field>
					<view class="duble-input flex-space-between">
						<text class="text">新增日期</text>
						<u-field
							label=""
							v-model="query.startDate"
							:disabled="true"
							:label-width="0"
							:border-bottom="false"
							input-align="center"
							placeholder="请选择"
							@click="chooseTime('start')"
						></u-field>
						-
						<u-field
							:disabled="true"
							label=""
							:value="query.endDate"
							:border-bottom="false"
							input-align="center"
							:label-width="0"
							placeholder="请选择"
							@click="chooseTime('end')"
						/>
					</view>
				</div>
				<div class="footer-btn">
					<div class="btn-left"><button class="reset" size="large" type="warn" @click="resetHandle">重置</button></div>
					<div class="btn-right"><button class="myBtn" round size="large" @click="queryHandle">搜索</button></div>
				</div>
			</div>
		</u-popup>
		<u-picker
			title="政策筛选"
			v-model="showPicker"
			mode="selector"
			:range="policyList"
			range-key="policyName"
			confirm-color="#4888FB"
			@confirm="onPolicyConfirm"
			@cancel="showPicker = false"
		/>
		<u-picker
			mode="time"
			v-model="timePicker"
			:default-time="defaultTime"
			:params="params"
			title="选择年月"
			@confirm="pickerConfirmHandle"
			start-year="2021"
			@cancel="timePicker = false"
			confirm-color="#4888FB"
		/>
		<uni-load-more :status="loadMore"></uni-load-more>
	</div>
</template>

<script>
import { formDateToString, getCurrentMonthFirst1, getNowMonthNoDate, getCurrentMonthLast, getMonthFirst, getMonthLast } from '_c/utils/date';
import loadMoreData from '@/mixins/loadmore';
import { merchList, preMerchList } from '_a/merch';
export default {
	mixins: [loadMoreData],
	data() {
		return {
			list: [],
			query: {
				startDate: '',
				endDate: ''
				// timeDate: getNowMonthNoDate(new Date()),
			},
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			timePicker: false,
			filterPopup: false,
			showPicker: false,
			totalNum: 0, // 总数量
			chooseType: 'start', //选择时间类型
			defaultTime: '',
			type: 'merch' //preMerch : 平行代理商户 :  ,merch 普通商户
		};
	},
	onLoad(o) {
		this.type = o.type || 'merch';
		// this.navIndex = o.type || 0;
		// this.query.policyCode = o.policyCode;
		// let item = this.policyList.find((item) => item.policyCode == o.policyCode);
		// if (item) {
		//   this.query.policyName = item.policyName;
		// }
		switch (this.type) {
			case 'pre':
				uni.setNavigationBarTitle({
					title: '平行代理商户信息查询'
				});
				break;
			default:
				break;
		}
		this.getList();
	},
	computed: {
		policyList() {
			return this.$store.getters.policyList || [];
		}
	},
	methods: {
		chooseTime(type) {
			this.timePicker = true;
			this.chooseType = type;
			if (type == 'start') {
				this.defaultTime = this.query.startDate;
			} else {
				this.defaultTime = this.query.entDate;
			}
		},
		toDetail(item) {
			this.$storage.setStore('merchDetailInfo', item);
			this.$nav.push({
				path: '/pages/home/home/detailInfo'
			});
		},
		onPolicyConfirm(e) {
			console.log(e);
			this.query.policyCode = this.policyList[e[0]].policyCode;
			this.query.policyName = this.policyList[e[0]].policyName;
			// this.chooseIndex = e[0];
		},
		init() {
			this.$nextTick(() => {
				this.list = [];
				this.refreshLoad();
			});
		},
		resetHandle() {
			this.typename = '全部';
			this.query = {
				pageNum: 1,
				pageSize: 20
			};
		},
		queryHandle() {
			this.$forceUpdate();
			this.init();
			this.filterPopup = false;
		},
		pickerConfirmHandle(item) {
			if (this.chooseType == 'start') {
				this.query.startDate = `${item.year}-${item.month}-${item.day}`;
			} else {
				this.query.endDate = `${item.year}-${item.month}-${item.day}`;
			}
			this.timePicker = false;
		},
		changeEChartType() {
			this.filterPopup = true;
		},
		getList() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.query
			};
			switch (this.type) {
				case 'preMerch':
					preMerchList(params).then(res => {
						var list = res.rows;
						this.totalNum = res.total;
						this.loadMoreStatusDeal(list);
						if (list.length > 0) {
							this.list = this.list.concat(list);
						}
					});
					break;
				case 'merch':
					merchList(params).then(res => {
						var list = res.rows;
						this.totalNum = res.total;
						this.loadMoreStatusDeal(list);
						if (list.length > 0) {
							this.list = this.list.concat(list);
						}
					});
					break;
				default:
					break;
			}
		},
		reachBottomCallBack() {
			this.getList();
		}
	}
};
</script>
<style scoped lang="scss">
.container {
	padding: R(25);
}

.list {
	background: #fff;
	border-radius: R(10);

	.filter {
		padding: R(20);
		font-size: R(24px);
		font-weight: 400;
		color: #666666;
		margin-bottom: R(20);

		.time-box {
			font-size: R(26);
		}

		.icon-xiajiantou {
			font-size: R(24);
			margin-left: R(14);
		}
	}
}

.total {
	font-size: R(24);
	font-weight: 400;
	color: #737373;
	margin-bottom: R(20);

	.blue {
		color: #4286f5;
	}
}

.item {
	margin: R(25) R(0);
	padding: R(14) R(28) R(24);
	border-bottom: 1px solid #eee;

	.title {
		font-size: R(30);
		font-weight: bold;
		color: #1a1a1a;

		/deep/.u-cell__value {
			color: #1a1a1a;
		}
	}

	/deep/.u-cell {
		padding: R(4) R(10);

		.u-cell__value {
			text-align: left;
		}
	}
}

.filter-body {
	padding: R(30);

	.f-title {
		font-size: R(30);
		text-align: center;
		font-weight: 400;
		color: #999;
	}
}

.filter-content {
	margin-bottom: R(30);

	.duble-input {
		border-bottom: 1px solid #eee;

		.text {
			width: R(140);
			white-space: nowrap;
			padding: 0 R(28);
		}
	}
}

.filter-body .footer-btn {
	display: flex;
	/*position: absolute;*/
	bottom: 0;
	width: 100%;
}

.filter-body .footer-btn .btn-left {
	width: 30%;
	margin-left: 15%;
}

.filter-body .footer-btn .btn-right {
	width: 30%;
	margin-left: 10%;
}

.filter-body .filter-tiem {
	margin-bottom: R(25);
}

.filter-body .filter-tiem .tit {
	font-size: R(32);
	color: #333;
}

.filter-body .filter-tiem .select-list .select-item {
	float: left;
	width: 33%;
	padding: R(20) R(10);
}

.icon-xiajiantou {
	font-size: R(24);
	margin-left: R(14);
}
</style>
